<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'

// 使用 useRouter 创建一个 router 实例
const router = useRouter()
const value = ref('');
const images = [
  'http://img2.baidu.com/it/u=3188494705,3119266535&fm=253&app=138&f=JPEG?w=1427&h=800',
  'http://img0.baidu.com/it/u=2960350089,3136384254&fm=253&app=138&f=JPEG?w=1427&h=800',
  'https://img1.baidu.com/it/u=443528609,3168815310&fm=253&fmt=auto&app=138&f=JPEG?w=1427&h=800'
];
const gaid = [
  { image: '/public/images/index01.png', text: '玫瑰' },
  { image: '/public/images/index02.png', text: '康乃馨' },
  { image: '/public/images/index03.png', text: '百合' },
  { image: '/public/images/index04.png', text: '菊花' },
  { image: '/public/images/index05.png', text: '绣球花' },
  { image: '/public/images/index06.png', text: '洋桔梗' },
  { image: '/public/images/index07.png', text: '草花' },
  { image: '/public/images/index08.png', text: '配花' },
  { image: '/public/images/index09.png', text: '配叶' },
  { image: '/public/images/index10.png', text: '自选大厅' }
];
const host = ref([
  { id: 1, image: '/public/images/index-huo.png', text1: '热销榜单', text2: '热销9.8万束', img: '/public/images/index-hua3.png' },
  { id: 2, image: '/public/images/index-biao.png', text1: '特价专区', text2: '韩式系列', img: '/public/images/index-hua4.png' },
  { id: 3, image: '/public/images/index-new.png', text1: '新品来袭', text2: '小公主', img: '/public/images/index-hua5.png' }
])
const go = () => {
  router.push({ path: '/OptionalView' })
}
</script>

<template>
  <div id="box">
    <!-- 标题 -->
    <div class="navBox">
      Flower Buy
    </div>
    <!-- 搜索框 -->
    <div class="search_box">
      <div class="search_box_left">
        <van-search v-model="value" placeholder="请输入关键词" shape="round" />
      </div>
      <div class="search_box_right">
        <van-icon name="service-o" size="30" />
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="swiperBox">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 宫格 -->
    <div class="gaidBox">
      <van-grid :border="false" :column-num="5">
        <van-grid-item v-for="(item, index) in gaid" :key="index" @click="go">
          <van-image :src="item.image" />
          {{ item.text }}
        </van-grid-item>
      </van-grid>

    </div>
    <!-- 官方动态 -->
    <div class="dynamicsBox">
      <div class="dynamicsBox_left">
        官方动态
      </div>
      <div class="dynamicsBox_right">
        <div class="dynamicsBox_right_center">
          <div class="dynamicsBox_right_center_top">
            <text class="_top_box">资讯</text>
            【版本更新】Flower Buy官网更新公告
          </div>
          <div class="dynamicsBox_right_center_top">
            <text class="_top_box">动态</text>
            【招商加盟】鲜花店饿了么外卖品牌加盟
          </div>
        </div>
      </div>
    </div>
    <!-- 经典推荐 -->
    <div class="sellBox">
      <div class="sell" style="background-image: linear-gradient(to right, #fe8d8d, #fb9b9b, #f8aeae);
">
        <div class="sell_left">
          <div class="sell_left_top">
            经典推荐
          </div>
          <div class="sell_left_bottom">
            RECOMMENDED<br />
            CLASSIC
          </div>
        </div>
        <div class="sell_right">
          <img src="../assets/images/index-hua1.png" alt="">
        </div>
      </div>
      <div class="sell" style="background-image: linear-gradient(to right, #fe9b42, #fbad67, #f8c291);
">
        <div class="sell_left">
          <div class="sell_left_top">
            自由定制
          </div>
          <div class="sell_left_bottom">
            FREE<br />
            CUSTOM
          </div>
        </div>
        <div class="sell_right">
          <img src="../assets/images/index-hua2.png" alt="">
        </div>
      </div>
    </div>
    <!-- 热销榜单 -->
    <div class="hostBox">
      <div class="host_Box" v-for="(item, index) in host" :key="index">
        <div class="host_Box_top">
          <div>
            <img :src="item.image" alt="" />
          </div>
          <div>{{ item.text1 }}</div>
        </div>
        <div class="host_Box_center">
          {{ item.text2 }}
        </div>
        <div class="host_Box_bottom">
          <img :src="item.img" alt="" />
        </div>
      </div>
    </div>
    <!-- 送恋人 -->
    <div class="loverBox">
      <div class="loverBox_left">
        <div class="loverFont1">送恋人</div>
        <div class="loverFont2">SEND LOVER</div>
        <div class="loverFont3">开启你的甜蜜日记</div>
        <div class="img">
          <img src="/public/images/index-11.png" alt="">
        </div>
      </div>
      <div class="loverBox_right">
        <div class="loverBox_right_top">
          <div class="loverBox_right_top_left">
            <div class="loverFont1">送长辈</div>
            <div class="loverFont2">SEND ELDER</div>
            <div class="loverFont3">脉脉温意情相伴</div>
          </div>
          <div class="loverBox_right_top_right">
            <img src="/public/images/index-12.png" alt="">
          </div>
        </div>
        <div class="loverBox_right_top">
          <div class="loverBox_right_top_left">
            <div class="loverFont1">送朋友</div>
            <div class="loverFont2">SEND FRIEND</div>
            <div class="loverFont3">许久相遇如初见</div>
          </div>
          <div class="loverBox_right_top_right">
            <img src="/public/images/index-13.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- 爆款必抢 -->
    <div class="shopList">
      <van-cell title="爆款必抢" is-link />
      <div class="shopList_box">
        <div class="shopBox" v-for="item in 8">
          <div class="shopBox_img">
            <img src="/public/images/langer4.png" alt="">
          </div>
          <div class="shopBox_title">
            春日特辑
          </div>
          <div class="shopBox_text">
            <div>5.2K/1.0w人已抢</div>
            <div style="margin-right: 10px;">52.5%</div>
          </div>
          <div class="shopBox_thing">
            <div class="shopBox_thing_left">
              <van-progress :percentage="50" pivot-text=" " stroke-width="8" color="#f84c55" />
            </div>
            <div class="shopBox_thing_right">
              <div><img src="/public/images/index-huo.png" alt=""></div>
              <div>剩余10K件</div>
            </div>
          </div>
          <div class="shopBox_price">
            <div class="shopBox_price_left">
              ￥<text style="font-size: 24px;">588.0</text>
            </div>
            <div class="shopBox_price_right">去抢购</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#box {
  padding-bottom: 50px;

  // 标题
  .navBox {
    padding: 20px 20px 10px;
    font-size: 18px;
  }

  // 搜索框
  .search_box {
    display: flex;
    justify-content: space-between;

    .search_box_left {
      width: 80%;
    }

    .search_box_right {
      width: 15%;
      padding-top: 3%;
      box-sizing: border-box;
    }
  }

  // 轮播图
  .swiperBox {
    border-radius: 15px;
    overflow: hidden;

    img {
      width: 100%;
      height: 220px;
    }
  }

  // 宫格
  .gaidBox {
    font-size: 14px;

    .van-grid-item__content {
      padding: 10px;

      .van-image {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 5px;
        box-shadow: 5px 5px 15px #ccc;
      }
    }
  }

  // 官方动态
  .dynamicsBox {
    background-color: #fff7f5;
    width: 95%;
    margin: 30px auto 0;
    padding: 10px 10px 10px 15px;
    box-sizing: border-box;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;

    .dynamicsBox_left {
      width: 16%;
      color: #fd6965;
      font-weight: bolder;
      font-size: 24px;
    }

    .dynamicsBox_right {
      width: 84%;
      letter-spacing: 10%;
      padding: 5px 0;
      box-sizing: border-box;

      .dynamicsBox_right_center {
        border-left: 1px solid #ccc;
        height: 100%;
        padding-left: 10px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;

        .dynamicsBox_right_center_top {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100%;
          height: 20px;
          font-size: 14px;

          ._top_box {
            color: #fd6965;
            border: 1px solid #fd6965;
            border-radius: 5px;
            font-size: 12px;
            padding: 2px;
            box-sizing: border-box;
          }
        }
      }
    }
  }

  // 经典推荐
  .sellBox {
    width: 95%;
    margin: 20px auto 0;
    display: flex;
    justify-content: space-between;

    .sell {
      width: 49%;
      border-radius: 10px;
      color: #fff;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .sell_left {
        width: 60%;

        .sell_left_top {
          font-size: 18px;
          margin-bottom: 10px;
        }

        .sell_left_bottom {
          font-size: 12px;
          color: rgba($color: #fff, $alpha: 0.6);
        }
      }

      .sell_right {
        width: 40%;

        img {
          width: 100%;
          height: 80px;
        }
      }
    }
  }

  // 热销榜单
  .hostBox {
    width: 95%;
    margin: 20px auto 0;
    background-image: linear-gradient(to bottom, #fbdee3, #ffffff, #ffffff, #ffffff, #ffffff);
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 5px 5px #e2e2e2;

    .host_Box {
      width: 25%;
      text-align: center;

      .host_Box_top {
        display: flex;

        img {
          width: 20px;
        }
      }

      .host_Box_center {
        font-size: 12px;
        color: #fff;
        background-color: #fd6965;
        width: 90%;
        margin: auto;
        border-radius: 10px;
        padding: 2px 6px;
        box-sizing: border-box;

      }

      .host_Box_bottom {
        img {
          width: 100%;
          height: 100px;
        }
      }
    }
  }

  // 送恋人
  .loverBox {
    width: 95%;
    margin: 20px auto 0;
    display: flex;
    justify-content: space-between;

    .loverBox_left {
      width: 49%;
      border-radius: 10px;
      background-image: linear-gradient(to bottom, #f6d2d2, #f6f4f4);
      color: #f46382;
      padding: 15px 15px 0;
      box-sizing: border-box;

      .loverFont1 {
        font-size: 24px;
        font-weight: bold;
      }

      .loverFont2 {
        font-size: 14px;
        font-weight: bold;
      }

      .loverFont3 {
        font-size: 14px;
        margin: 10px 0 20px;
      }

      .img {
        width: 90%;
        margin: auto;
        height: 120px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .loverBox_right {
      width: 49%;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;

      .loverBox_right_top {
        border-radius: 10px;
        background-image: linear-gradient(to bottom, #faebdc, #f6f4f4);
        color: #ffa75b;
        width: 100%;
        height: 49%;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        .loverBox_right_top_left {
          width: 53%;

          .loverFont1 {
            font-size: 16px;
            font-weight: bold;
          }

          .loverFont2 {
            font-size: 12px;
            font-weight: bold;
          }

          .loverFont3 {
            font-size: 12px;
            margin: 10px 0 20px;
          }
        }

        .loverBox_right_top_right {
          width: 45%;

          img {
            width: 100%;
            height: 100;
            margin-top: 12px;
          }
        }
      }
    }
  }

  // 爆款必抢
  .shopList {
    width: 95%;
    margin: 20px auto 0;

    .van-cell__title {
      font-weight: bold;
      font-size: 18px;
    }

    .shopList_box {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .shopBox {
        width: 48%;
        margin-bottom: 10px;

        .shopBox_img {
          img {
            width: 100%;
            border-radius: 10px;
          }
        }

        .shopBox_title {
          margin: 5px 0;
        }

        .shopBox_text {
          display: flex;
          justify-content: space-between;
          color: #9a9a9a;
          font-size: 14px;
          line-height: 19px;
        }

        .shopBox_thing {
          margin: 5px 0;
          display: flex;
          justify-content: space-between;

          .shopBox_thing_left {
            width: 58%;
            padding-top: 3%;
            box-sizing: border-box;
          }

          .shopBox_thing_right {
            width: 40%;
            display: flex;
            justify-content: space-between;
            color: #9a9a9a;
            font-size: 11px;

            img {
              width: 15px;
            }
          }
        }

        .shopBox_price {
          display: flex;
          justify-content: space-between;

          .shopBox_price_left {
            color: #f84c55;
          }

          .shopBox_price_right {
            color: #fff;
            background-color: #f84c55;
            padding: 5px 15px;
            border-radius: 35px;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}
</style>